<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
   <link rel="stylesheet" href="./css/reset.css">
   <link rel="stylesheet" href="./css/swiper-bundle.min.css">
   <script src="./js/axios.js"></script>
   
   <script src="./swiper-bundle.min.js"></script>
<style>
    .swiper{
        width: 992px;
        height: 460px;
        
    }
</style>

 
</head>
<body>
    <div class="box">
        <div class="aa2">
       <div class="aa1">
        <ul>
            <li><a href="">小米商城</a><span>|</span></li>
            <li><a href="">MIUI</a><span>|</span></li>
            <li><a href="">loT</a><span>|</span></li>
            <li><a href="">云服务</a><span>|</span></li>
            <li><a href="">天星数科</a><span>|</span></li>
            <li><a href="">有品</a><span>|</span></li>
            <li><a href="">小爱开放平台</a><span>|</span></li>
            <li><a href="">企业团购</a><span>|</span></li>
            <li><a href="">资质证照</a><span>|</span></li>
            <li><a href="">协议规则</a><span>|</span></li>
            <li><a href="">下载app</a><span>|</span></li>
            <li><a href="">Select Location</a></li>
        </ul>
       </div> <div class="aa4">
           <li><a href="">购物车(0)</a></li>
       </div>
       <div class="aa3">
           <ul>
           <li><a href="./denglu.html">登录</a><span>|</span></li>
           <li><a href="">注册</a><span>|</span></li>
           <li><a href="">消息通知</a></li>
            </ul>
       </div>
      </div>
  
</div>
<div class="aa5">
    
    <img src="./img/icon-小米归属.png" alt="">
    <div class="aa6">
        <div class="aa7">
            <ul>
                <li><a href="">xiaomi手机</a></li>
                <li><a href="">redmi红米</a></li>
                <li><a href="">电视</a></li>
                <li><a href="">笔记本</a></li>
                <li><a href="">平板</a></li>
                <li><a href="">家电</a></li>
                <li><a href="">路由器</a></li>
                <li><a href="">服务</a></li>
                <li><a href="">社区</a></li>
            </ul>
        </div>
     
    </div> 
      <div class="aa8">
        <input type="text">
        <input type="submit" value="" class="aa9">
    </div>
</div>
<div class="aa10">
    <div class="bb1">
        <div class="bb2">
            <li>手机</li>
            <li>电视</li>
            <li>笔记本 平板</li>
            <li>家电</li>
            <li>出行 穿戴</li>
            <li>智能路由器</li>
            <li>电源 配件</li>
            <li>健康 儿童</li>
            <li>耳机 音响</li>
            <li>生活 箱包</li>
       </div>
    </div>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./img/xm3.webp" alt=""></div>
            <div class="swiper-slide"><img src="./img/xm2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./img/xm2.webp" alt=""></div>
        </div>
        <div class="swiper-pagination"></div>
    
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
</div>
</div>
<div class="bb3">
    <img src="./img/QQ图片20220214222254.png" alt="">
    <img src="./img/111.jpg" alt="">
    <img src="./img/xm3.webp" alt="">
    <img src="./img/xm2.jpg" alt="">
</div>
<div class="bb4">
    <div class="bb5">
        <img src="./img/222.webp" alt="">
        <div class="bb6">
            <span>手机</span>
            <span>查看更多</span>
        </div>
        <div class="bb7">
            <div class="bb8">
                <img src="./img/333.webp" alt="">
            </div>
            <div class="bb9">
               
            </div>
        </div>
    </div>
  
</div>
<script>        
    var mySwiper = new Swiper ('.swiper', {
     loop: true, // 循环模式选项
      
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      
      // 如果需要滚动条
      
    })  
    let bb9=document.querySelector(".bb9")
    let uid=localStorage.getItem("uid")
    // console.log(uid);
    relist()
       async function relist() {
           let url="http://jx.xuzhixiang.top/ap/api/allproductlist.php"
           let pagesize=8
           let pagenum =0
           
           let data={uid,pagenum,pagesize}
           let r =await axios.get(url,{params:data})
           console.log(r.data);
let arr=r.data.data.map((v)=>
`
<a href="详情页.html?pid=${v.pid}" class="a">
<div class="bb10">
    <img src="${v.pimg}" alt="">
                    <p>${v.pname}</p>
                    <p>${v.pdesc}</p>
                    <p>${v.pprice}元</p>
                </div>
            </a>
 `)
       bb9.innerHTML=arr.join("")
       }   
    </script>
</body>
</html>